<template>
  <view class="tabbar-box">
    <view style="display: flex">
      <view
        class="itembox"
        v-for="(item, index) in tabList"
        :key="index"
        @click="tapTabbar(index, item)"
      >
        <t-image
          class="img"
          :src="tabIndex === index ? item.active : item.url"
        ></t-image>
        <text class="text">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
// import tab1 from "@/assets/tabbar/tab1.png"
// import tabActive1 from "@/assets/tabbar/tab1-1.png"
import tab1 from "@/assets/tabbar/index.png";
import tabActive1 from "@/assets/tabbar/index-active1.png";
import tab2 from "@/assets/tabbar/tab2.png";
import tabActive2 from "@/assets/tabbar/tab2-1.png";
import tab3 from "@/assets/tabbar/tab3.png";
import tabActive3 from "@/assets/tabbar/tab3-1.png";
import tab4 from "@/assets/tabbar/tab4.png";
import tabActive4 from "@/assets/tabbar/tab4-1.png";
import tab5 from "@/assets/tabbar/tab5.png";
import tabActive5 from "@/assets/tabbar/tab5-1.png";

const router = useRouter();
const route = useRoute();
const emits = defineEmits(["setTabIndex"]);
const tabIndex = ref(0);
const tabList = ref([
  {
    url: tab1,
    active: tabActive1,
    name: "漫画",
    routeName: "comic",
  },
  {
    url: tab2,
    active: tabActive2,
    name: "广场",
    routeName: "squarePage",
  },
  // {
  // 	url:tab3,
  // 	active:tabActive3,
  // 	name:'福利',
  // 	routeName: ''
  // },
  {
    url: tab4,
    active: tabActive4,
    name: "收藏",
    routeName: "favorite",
  },
  {
    url: tab5,
    active: tabActive5,
    name: "我的",
    routeName: "my",
  },
]);

// 点击
const tapTabbar = (index, item) => {
  // tabIndex.value = index;
  if (item.routeName) {
    router.push({ name: item.routeName });
  }
};

const syncTabIndexByRoute = () => {
  // 找到当前路由 name 对应的 tab 索引
  const matchedIndex = tabList.value.findIndex(
    (tab) => tab.routeName === route.name // 路由名与 tabList 的 routeName 匹配
  );
  // 若匹配到（避免路由名不存在的情况），更新 tabIndex
  if (matchedIndex !== -1) {
    tabIndex.value = matchedIndex;
  }
};

// 3. 初始化时同步一次（页面加载时就匹配当前路由的 tab 样式）
syncTabIndexByRoute();

// 4. 监听路由变化，每次路由切换后重新同步 tabIndex
watch(
  () => route.name, // 监听路由的 name 变化
  () => {
    syncTabIndexByRoute(); // 路由变化后重新匹配 tabIndex
  },
  { immediate: true } // 立即执行（确保初始化时也触发）
);
</script>

<style lang="scss" scoped>
.tabbar-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 70px;
  background: #fff;

  /* 上投影 */
  box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.05);

  .itembox {
    height: 70px;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;

    .img {
      width: 25px;
      height: 25px;
    }

    .text {
      font-size: 14px;
      margin-top: 3px;
      font-weight: 500;
    }
  }
}
</style>
